<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <el-input style="width: 200px" type="text" placeholder="姓" v-model="ofn" />
      <el-input style="width: 200px" type="text" placeholder="名" v-model="oln" />
      <br />
      全名: {{ onename }}
    </div>
    <div>
      <p>第二题</p>
      <el-input style="width: 200px" type="text" placeholder="单价" v-model="tpr" />
      <el-input style="width: 200px" type="text" placeholder="数量" v-model="tnum" />
      <br />
      总价: {{ tsum }}
    </div>
    <div>
      <p>第三题</p>
      <el-input style="width: 200px" type="text" placeholder="搜索用户" v-model="tkw" />
      <ul v-for="(user, index) in users" :key="index">
        <li>{{ user }}</li>
      </ul>
    </div>
    <div>
      <p>第四题</p>
      <el-input
        style="width: 200px"
        type="text"
        placeholder="输入日期(YYYY-MM-DD)"
        v-model="fdate"
      />
      <br />
      格式化日期: {{ formatdate }}
    </div>
    <div>
      <p>第五题</p>
      <el-input
        style="width: 200px"
        type="text"
        placeholder="输入背景颜色(#ffffdd)"
        v-model="fcolor"
      />
      <div :style="fbc" class="fff" style="">这是一个动态背景颜色的盒子</div>
    </div>
    <div>
      <p>第六题</p>
      <form>
        用户名:
        <input
          style="width: 200px"
          type="text"
          placeholder="请输入用户名"
          v-model="data.form.sname"
        /><br />
        年龄:
        <input style="width: 200px" type="text" placeholder="请输入年龄" v-model="data.form.sage" />
        <br />
        性别:
        <label for="r1"><input type="radio" id="r1" value="男" v-model="data.form.ssex" />男</label>
        <label for="r2"><input type="radio" id="r2" value="女" v-model="data.form.ssex" />女</label>
      </form>
      <br />
      <h3>用户信息摘要</h3>
      用户名: {{ username }} <br />
      年龄: {{ userage }} <br />
      性别: {{ usersex }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
//第一题
let ofn = ref('')
let oln = ref('')
//第二题
let tpr = ref('')
let tnum = ref('')
//第三题
let tkw = ref('')
let tuser = ref(['Alice', 'Bob', 'Charlie', 'David'])
//第四题
let fdate = ref('')
//第五题
let fcolor = ref('')
//第六题
let data = reactive({
  form: { sname: '', sage: 0, ssex: '' },
})
//第一题
const onename = computed(() => {
  return ofn.value + oln.value
})
//第二题
const tsum = computed(() => {
  return tpr.value * tnum.value
})
//第三题
const users = computed(() => {
  return tuser.value.filter((item) => item.toLowerCase().includes(tkw.value.toLowerCase()))
})
//第四题
const formatdate = computed(() => {
  let arr = fdate.value.split('-')
  if (fdate.value) {
    return arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
  }
})
//第五题
const fbc = computed(() => {
  return { backgroundColor: fcolor.value }
})
//第六题
const username = computed(() => {
  return data.form.sname
})
const userage = computed(() => {
  return data.form.sage + '岁'
})
const usersex = computed(() => {
  return data.form.ssex
})
</script>

<style scoped>
.fff {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 100px;
}
</style>
